Skip to content


ai  101  pytorch  classification  nvidia  cuda  install  tensorrt  yolo  ardupilot  None  ros2  dds  micro ros  xrce  sitl  plugin  SITL  debug  rangefinder  pymavlink  mavros  gazebo  distance sensor  system_time  timesync  cmake  gtest  ctest  cpp  c++  format  fmt  multithreading  spdlog  camera  coordinate system  orb  matching  opencv  build  transformation  computer vision  homography  optical flow  of  trackers  cv  cyclonedds  eprosima  fastdds  simulation  config  ignition  bridge  sdf  tips  ign-transport  sensors  lidar  aptly  apt  encryption  pgp  docker  git  bundle  github  hooks  pre-commit  lxd  container  lxc  x11  profile  vscode  marpit  presentation  marp  markdown  mermaid  video  ffmpeg  gstreamer  cheat-sheet  sdp  v4l2loopback  gi  snippets  cheat Sheet  python  asyncio  future  click  cli  numpy  project  template  black  isort  docs  project document  docstrings  flake8  linter  git-hook  mypy  unittest  pytest  pylint  mock  iterator  generator  logging  tuple  namedtuple  typing  annotation  pyzmq  zmq  msgpack  action  namespace  remap  control2  ros2_control  gdb  qos  tag  plugins  msg  node  zero-copy  shm  tutorial  algorithm  calibration  diff  pid  dev  colcon  colcon_cd  rpi  arm  qemu  settings  behavior  plot  visualization  debugging  diagnostic  diagnostics  tutorials  gst  math  apm  rat_runtime_monitor  web  rosbridge  vue  binding  discovery  gazebo-classic  launch  spawn  cook  gps  imu  ray  gazebo_ros_ray_sensor  ultrsonic  range  ultrasonic  gazebo classic  wrench  effort  odom  ign  gz  xacro  ros_ign  diff_drive  odometry  joint_state  argument  OpaqueFunction  DeclareLaunchArgument  LaunchConfiguration  tmux  nav  slam  test  rclpy  executor  MultiThreadedExecutor  SingleThreadedExecutor  param  dynamic-reconfigure  service  client  setup.py  package.xml  parameter  parameters  custom  msgs  executers  pub  sub  rqt  rviz  rviz2  pose  marker  tf2  deb  package  setup  local_setup  rosdep  package manager  project settings  vcstool  cross-compiler  nano  texture  tmuxp  rootfs  embedded  zah  linux  rm  ubuntu  ip  ss  network  netstat  snap  deploy  ssh  systemd  mkdocs  extensions  socat  networking  serial  udp  tc  mtu  select  px4  robotics  kalman_filter  kalman  filter  control  todo  vscode-ext  json  yaml  schema  yocto  poky  world  gazebo_ros2_control  position_controller  effort_controller  velocity_controller  urdf  gazebo_ros_force  gazebo_ros_joint_state_publisher  robot_state_publisher  joint_state_publisher  projects  vrx  buoyancy 

Part2 - hello vue

learn basic vue javascript frame work for using roslibjs more convenient


Table of Content

Vue.js is an open-source MVVM framework

Note

Install HTML Preview
and change it’s security permission to view vue html pages

hello#

<script type="importmap">
    {
      "imports": {
        "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
      }
    }
</script>

<div id="app">{{ message }}</div>

<script type="module">
    import { createApp } from 'vue'

    createApp({
        data() {
            return {
                message: 'Hello Vue3!'
            }
        }
    }).mount('#app')
</script>

Data#

The variables in Vue.js are JavaScript style variables
and support all the standard types that are available in vanilla JavaScript.

These types include:

  • String - Stores strings
  • Number - Stores integers, floating point, and exponential notations
  • Boolean - Stores ‘true’ or ‘false’
  • Null - Represents null value
  • Object - Stores a dictionary
  • Array - Stores a list of variables
data
<script type="importmap">
    {
      "imports": {
        "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
      }
    }
</script>

<div id="app">
    <div>string: {{ name }}</div>
    <div>number: {{ count }}</div>
    <div>bool: {{ visible }}</div>
    <div>array: {{ todos[1] }}</div>
    <div>null: {{ error }}</div>
    <div>object: {{ object.foo }}</div>
</div>

<script type="module">
    import { createApp } from 'vue'

    createApp({
        data() {
            return {
                name: 'Bob',                    //string
                count: 0,                       //number
                visible: false,                 //boolean
                todos: ['task1', 'task2'],      //array
                error: null,                     //null
                object: {                       //object
                    foo: 'bar'
                }
            }
        }
    }).mount('#app')
</script>

Method#

The methods property in the Vue instance contains the definitions of all the functions that the Vue instance can perform.
Function cat called by specific event or where needed

method
<script type="importmap">
    {
      "imports": {
        "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
      }
    }
</script>

<div id="app">{{get_name()}}</div>

<script type="module">
    import { createApp } from 'vue'

    createApp({
        data() {
            return {
                greeting: 'Hello world'
            }
        },
        methods: {
                get_name: function(){
                    return this.greeting;
                }
        }
    }).mount('#app')
</script>

Note

using this to refer data variables


References#